<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            width: 80px;
            height: 30px;
            display: block;
            margin: 20px auto 0;
            background-color: #eee;
        }

        .map {
            width: 800px;
            height: 400px;
            background-color: #ccc;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>

<body>
    <button class="btn">开始游戏</button>
    <div class="map"></div>
</body>
<script>
    var map = document.querySelector('.map')

    function Food() {
        this.x = 0;
        this.y = 0

        Food.prototype.width = 20;
        Food.prototype.height = 20;
        Food.prototype.color = 'green';

        var foodElements = [];

        //初识化食物
        Food.prototype.init = function () {
            this.remove()
            var div = document.createElement('div');
            div.style.width = this.width + 'px';
            div.style.height = this.height + 'px';
            div.style.backgroundColor = this.color;
            div.style.position = 'absolute';
            this.x = parseInt(Math.random() * (map.clientWidth / this.width));
            this.y = parseInt(Math.random() * (map.clientHeight / this.height));
            for (var i = 0; i < snake.body.length; i++) {
                if (this.x == snake.body[i].x && this.y == snake.body[i].y) {
                    this.x = parseInt(Math.random() * (map.clientWidth / this.width));
                    this.y = parseInt(Math.random() * (map.clientHeight / this.height));
                }
            }
            div.style.left = this.x * this.width + 'px';
            div.style.top = this.y * this.height + 'px';
            map.appendChild(div);
            foodElements.push(div);
        }

        //food删除
        Food.prototype.remove = function () {
            for (var i = 0; i < foodElements.length; i++) {
                map.removeChild(foodElements[i]);
                foodElements.splice(i, 1)
            }
        }
    }

    function Snake() {
        this.direction = 'right';
        this.body = [{
            x: 3,
            y: 2,
            color: 'red'
        },
        {
            x: 2,
            y: 2,
            color: 'orange'
        },
        {
            x: 1,
            y: 2,
            color: 'orange'
        }]

        Snake.prototype.width = 20;
        Snake.prototype.height = 20;

        var snakeElements = [];

        //初始化小蛇
        Snake.prototype.init = function () {
            this.remove();
            for (var i = 0; i < this.body.length; i++) {
                var obj = this.body[i];
                var div = document.createElement('div');
                map.appendChild(div);
                div.style.width = this.width + 'px';
                div.style.height = this.height + 'px';
                div.style.backgroundColor = obj.color;
                div.style.position = 'absolute';
                div.style.left = obj.x * this.width + 'px';
                div.style.top = obj.y * this.height + 'px';

                snakeElements.push(div)
            }
        }

        //删除snake
        Snake.prototype.remove = function () {
            for (var i = snakeElements.length - 1; i >= 0; i--) {
                map.removeChild(snakeElements[i]);
                snakeElements.splice(i, 1);
            }
        }

        //snake移动
        Snake.prototype.move = function () {
            //身体移动
            for (var i = this.body.length - 1; i > 0; i--) {
                this.body[i].x = this.body[i - 1].x;
                this.body[i].y = this.body[i - 1].y;
            }

            //头部移动
            switch (this.direction) {
                case 'right':
                    this.body[0].x += 1;
                    break;
                case 'left':
                    this.body[0].x -= 1;
                    break;
                case 'up':
                    this.body[0].y -= 1;
                    break;
                case 'down':
                    this.body[0].y += 1;
                    break;
            }
            this.init();

            //小蛇吃掉食物
            if (this.body[0].x == food.x && this.body[0].y == food.y) {
                var last = this.body[this.body.length - 1];
                this.body.push({
                    x: last.x,
                    y: last.y,
                    color: last.color
                })
                food.init();
            }

            //撞墙死亡
            var maxX = map.clientWidth / this.width;
            var maxY = map.clientHeight / this.height;
            var headX = this.body[0].x;
            var headY = this.body[0].y;
            if (headX < 0 || headX > maxX - 1 || headY < 0 || headY > maxY - 1) {
                clearInterval(timeId);
                timeId = null;
                alert('撞墙,游戏结束')
                this.direction = 'right';
                this.body = [{
                    x: 3,
                    y: 2,
                    color: 'red'
                },
                {
                    x: 2,
                    y: 2,
                    color: 'orange'
                },
                {
                    x: 1,
                    y: 2,
                    color: 'orange'
                }]
                this.init()
            }

            //小蛇咬到自己
            console.log(this.body[0], this.body);
            for (var i = 1; i < this.body.length; i++) {
                if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
                    console.log(11111111);
                    clearInterval(timeId);
                    timeId = null;
                    // alert('撞墙,游戏结束')
                    // this.direction='right';
                    // this.body=[{
                    //     x:3,
                    //     y:2,
                    //     color:'red'
                    // },
                    // {
                    //     x:2,
                    //     y:2,
                    //     color:'orange'
                    // },
                    // {
                    //     x:1,
                    //     y:2,
                    //     color:'orange'
                    // }]
                    // this.init()
                }
            }

        }


    }

    var snake = new Snake();
    var food = new Food();
    snake.init();
    food.init();

    document.onkeydown = function (e) {
        var e = e || window.event;
        var keycode = e.keyCode;
        switch (keycode) {
            case 37:
                if (snake.direction != 'right') {
                    snake.direction = 'left';
                }
                break;
            case 38:
                if (snake.direction != 'down') {
                    snake.direction = 'up';
                }
                break;
            case 39:
                if (snake.direction != 'left') {
                    snake.direction = 'right';
                }
                break;
            case 40:
                if (snake.direction != 'up') {
                    snake.direction = 'down';
                }
                break;
        }
    }

    var btn = document.querySelector('.btn');
    var timeId = null;
    function begin() {
        if (timeId != null) return false;
        timeId = setInterval('snake.move()', 200);
    }
    btn.onclick = begin;
</script>

</html>